<%- contentFor('heroContent') %>
  <!-- Hero Banner with Search -->
  <div class="hero-banner detail-hero-banner">
    <div class="hero-content">
      <div class="search-box-container">
        <form action="/search" method="GET" class="main-search-form">
          <div class="search-select-wrapper">
            <select name="searchType">
              <option value="all">All</option>
              <option value="title">Title</option>
              <option value="author">Author</option>
              <option value="isbn">ISBN(13 digits)</option>
              <option value="publisher">Publisher</option>
            </select>
          </div>
          <input type="text" name="query" placeholder="Type ISBN or title..." class="main-search-input">
          <button type="submit" class="main-search-btn">
            <i class="search-icon"></i>
          </button>
        </form>
      </div>
    </div>
  </div>

  <!-- 面包屑导航 -->
  <div class="breadcrumb">
    <a href="/">Home</a> &gt; <a href="/books">Books</a> &gt; <%= book ? book.Title : 'Book Detail' %>
  </div>

  <div class="page-container detail-page search-detail-page">
    <!-- 左侧出版商导航 -->
    <div class="publisher-sidebar">
      <h3>Publisher Imprints</h3>
      <ul class="publisher-list">
        <li>
          <a href="/books" class="publisher-link">
            All <span class="count">(All)</span>
          </a>
        </li>
        <% if (publisherCounts && publisherCounts.length> 0) { %>
          <% publisherCounts.forEach(function(publisher) { %>
            <li>
              <a href="/books?publisher=<%= encodeURIComponent(publisher.name) %>" class="publisher-link">
                <%= publisher.name %> <span class="count">(<%= publisher.count %>)</span>
              </a>
            </li>
            <% }); %>
              <% } else { %>
                <li>No publishers found</li>
                <% } %>
      </ul>
    </div>

    <!-- 详情内容 -->
    <div class="detail-content">
      <% if (error) { %>
        <div class="error-message">
          <p>
            <%= error %>
          </p>
        </div>
        <% } else if (book) { %>
          <div class="book-details-wrapper">
            <!-- 封面 -->
            <div class="book-cover-large">
              <% if (book.CoverImage) { %>
                <img src="<%= book.CoverImage %>" alt="<%= book.Title || 'Book Cover' %>" class="detail-cover-image">
                <% } else { %>
                  <img src="/images/img.png" alt="<%= book.Title || 'Book Cover' %>"
                    class="detail-cover-image placeholder-image">
                  <% } %>
            </div>

            <!-- 基本信息（表格外） -->
            <div class="book-info-detail">
              <h1 class="book-title-large">
                <%= book.Title || 'Book Title' %>
              </h1>

              <% if(book.Authors) { %>
                <div class="book-main-info">
                  <div class="detail-authors">
                    <span class="author-label">Authors:</span>
                    <a href="#">
                      <%= book.Authors %>
                    </a>
                  </div>
                </div>
                <% } %>

                  <!-- <% if(book['Publication Date']) { %>
                    <div class="book-main-info">
                      <div class="detail-series">
                        <span class="series-label">Edition:</span>
                        <a href="#">
                          <%= book['Publication Date'] %>
                        </a>
                      </div>
                    </div>
                    <% } %> -->

                  <!-- <% if(book.Publisher) { %>
                        <div class="book-main-info">
                          <div class="detail-publisher">
                            <span class="publisher-label">Publisher:</span>
                            <%= book.Publisher %>
                          </div>
                        </div>
                        <% } %> -->
            </div>
          </div>

          <!-- 其他详细信息（表格内） -->
          <div class="book-details-table-container">
            <table class="book-details-table">
              <tbody>
                <% if(book.ISBN) { %>
                  <tr>
                    <th>ISBN</th>
                    <td>
                      <%= book.ISBN %>
                    </td>
                  </tr>
                  <% } %>
                    <% if(book.Publisher) { %>
                      <tr>
                        <th>Publisher</th>
                        <td>
                          <%= book.Publisher %>
                        </td>
                      </tr>
                      <% } %>

                        <% if(book.FormatType) { %>
                          <tr>
                            <th>FormatType</th>
                            <td>
                              <%= book.FormatType %>
                            </td>
                          </tr>
                          <% } %>

                            <% if(book.Language) { %>
                              <tr>
                                <th>Language</th>
                                <td>
                                  <%= book.Language %>
                                </td>
                              </tr>
                              <% } %>

                                <% if(book['Publication Date']) { %>
                                  <tr>
                                    <th>Publication Date</th>
                                    <td>
                                      <%= book['Publication Date'] %>
                                    </td>
                                  </tr>
                                  <% } %>

                                    <% const skipFields=['id', 'sourceType' , 'CoverImage' , 'Title' , 'Authors'
                                      , 'ISBN' , 'Language' , 'Publisher' , 'FormatType' , 'Description'
                                      , 'Publication Date' , 'category' ]; Object.keys(book).forEach(function(key) { if
                                      (!skipFields.includes(key) && book[key]) { %>
                                      <tr>
                                        <th>
                                          <%= key %>
                                        </th>
                                        <td>
                                          <%= book[key] %>
                                        </td>
                                      </tr>
                                      <% } }); %>
              </tbody>
            </table>
          </div>

          <% if (book.Description) { %>
            <!-- 描述部分 -->
            <div class="book-description">
              <h3>Description</h3>
              <div class="description-content">
                <%= book.Description %>
              </div>
            </div>
            <% } %>

              <div>
                <% if (book.category) { %>
                  <a href="/books?category=<%= book.category.toLowerCase() %>" class="btn back-btn">View Similar
                    Books</a>
                  <% } %>
              </div>
              <% } else { %>
                <div class="not-found">
                  <p>Book not found</p>
                </div>
                <% } %>
    </div>
  </div>

  <%- contentFor('style') %>
    <style>
      /* 这里的样式会被外部CSS覆盖，但作为备份 */
      .detail-cover-image {
        width: 140px;
        height: 172px;
        object-fit: cover;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
      }

      .book-details-wrapper {
        display: flex;
        margin-bottom: 30px;
        padding-bottom: 20px;
        padding: 0;
        background-color: #fff;
      }

      .book-cover-large {
        flex: 0 0 140px;
        margin-right: 20px;
        width: 140px;
        height: 172px;
        border-radius: 4px;
        border: none;
      }

      .book-info-detail {
        flex: 1;
      }

      .book-title-large {
        font-size: 20px;
        margin-bottom: 4px;
        color: #2B3545;
        border-bottom: none;
        padding-bottom: 0;
      }

      .book-main-info {
        font-size: 16px;
        color: #555;
      }

      .author-label,
      .publisher-label,
      .series-label {
        font-weight: 600;
        color: #333;
        display: inline-block;
        text-align: right;
        padding-right: 10px;
        font-size: 14px;
      }

      .detail-authors a,
      .detail-series a {
        color: #0066cc;
        text-decoration: none;
        font-size: 14px;
      }

      .detail-authors a:hover,
      .detail-series a:hover {
        text-decoration: underline;
      }

      .book-details-table-container {
        margin-top: 30px;
        margin-bottom: 30px;
      }

      .book-details-table {
        width: 100%;
        border-collapse: collapse;
        border: none;
        font-size: 14px;
      }

      .book-details-table th,
      .book-details-table td {
        padding: 16px;
        text-align: left;
      }

      .book-details-table th {
        width: 50%;
        font-weight: 600;
      }

      .book-details-table tr:nth-of-type(2n+1) {
        padding: 16px;
        background-color: rgba(209, 217, 226, 0.15);
      }

      .book-details-table tr:first-of-type {
        border-top: 1px solid rgb(209, 217, 226);
      }

      .book-description {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #eee;
      }

      .description-content {
        line-height: 1.6;
        color: #333;
      }

      .detail-actions {
        margin-top: 30px;
        padding-top: 15px;
        border-top: 1px solid #eee;
      }

      .back-btn {
        display: inline-block;
        padding: 8px 20px;
        background-color: #111579;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        font-size: 14px;
        transition: background-color 0.2s;
      }

      .back-btn:hover {
        background-color: #0d1162;
      }

      .not-found {
        text-align: center;
        padding: 50px 0;
      }

      .not-found p {
        font-size: 18px;
        color: #666;
        margin-bottom: 20px;
      }

      /* .publisher-sidebar 和 .publisher-list 样式已移至style.css */
    </style>
